<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 教室模拟</title>
<link href="../css/all.css" rel="stylesheet" type="text/css" />
<link href="../css/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" />
<script src="../ref/jquery-1.8.3.js" type="text/javascript"></script>

<style type="text/css">
	body{width:1005px;}
	#classroom{margin:0 auto;width:800px;  }
	#teacher_table{
	background: #CEBF98;
	color:#333333;
	width: 171px;
	height: 38px;
	margin:0 auto;
	line-height: 38px; 
	text-align: center;

}	
	
	#table_place {margin-left: auto; margin-right: auto; margin-top: 10px;}
	#table_place table{  }
	#table_place table tr{ background:#D6B881; }
	#table_place table td{  border-bottom:#FFFFFF solid 8px; width:35px; height:25px; border-left:#FFFFFF 2px solid; }
	.space{ border-right:#FFFFFF 10px solid;}
	.broken{ background:#858585;}
	.empty{ background: #FFFFFF;}
</style>

<script type="text/javascript">
	$(function(){
		$.post("inittable",{classroom_id:"1"},function(json){
			if(json["msg"]!=null){
				alert(json["msg"]);
				return;
			}
			table_create(json["hang"],json["lie"]);
			isbroken(json["broken"]);
			isempty(json["empty"]);
			addspace(json["space"]);
			
			//获取tabel宽度 并，赋值div classroom
			
			$("#classroom").width($("#table_place table").width());
			
			
		});
    });
	
	
	//创建课桌
	function table_create(hang,lie){
		if(hang==null||lie==null)
			return;
		var str="";
		for(var i=0; i <hang;i++){
			str+="<tr>";
			for(var j=0;j<lie;j++){
			str+="<td onclick=></td>";
			}
			str+="</tr>";
		}
		$("#table_place table").append(str);
	}
	
	
	
	
	//增加空格,相当于增加走道
	function addspace(str){
		if(str == null)
			return;
		var attr = parseStringToPosition(str);		
		for(var i in attr){
			$("#table_place table tr td:nth-child("+attr[i]+")").addClass("space");
		} 
		
	}

	
	//表明第几个座位是坏的,arr为类似 “10:20,30:10,1:3”的东西 需再拆分成行列
	function isbroken(arr){
		if(arr == null)
			return;
		var position_array = parseStringToPosition(arr);
		for(var i in position_array){
			position = position_array[i].split(":");
			$("#table_place table tr:nth-child("+position[0]+") td:eq("+(parseInt(position[1])-1)+")").addClass("broken");
		}
		
	}
	//第几个 是空的,arr为类似 “10:20,30:10,1:3”的东西 需再拆分成行列
	function isempty(arr){
		if(arr == null)
			return;
		var position_array = parseStringToPosition(arr);
		for(var i in position_array){
			position = position_array[i].split(":");
			$("#table_place table tr:nth-child("+position[0]+") td:eq("+(parseInt(position[1])-1)+")").addClass("empty");
		}
	}
	//将字符串变为 位置数组 。数组类似{"10:20","30:10"}
	function parseStringToPosition(str){
		var arr = str.split(",");
		return arr;
	}
	
	
</script>
</head>
<body>
	<div id="classroom">
    	<div id="teacher_table"><span>讲台</span></div>
        <div id="table_place">
          <table cellspacing="0">           
          </table>
        </div>
	</div>
</body>
</html>
